<template>
  <div class="wrap">
    <a-card class="card_box">
      <div class="tabCard_title">
        <span
          >{{ equipmentStore.$state.paramInfo.paramName }} 历史记录 -- ({{
            equipmentStore.$state.devInfo.devName
          }})</span
        >
      </div>
      <div class="tabCar_type">
        <span class="title">记录类型</span>
        <a-tag color="green" :default-checked="true">适宜</a-tag>
        <a-tag color="red" :default-checked="true">偏高</a-tag>
        <a-tag color="orange" :default-checked="true">偏低</a-tag>
        <!-- <span class="item">适宜</span>
        <span class="item">偏高</span>
        <span class="item">偏低</span> -->
      </div>
      <div class="tabCar_search">
        <span class="title">选择时间</span>
        <div class="data_select_box">
          <a-space>
            <template #split>
              <a-divider direction="vertical" />
            </template>
            <a-range-picker
              style="width: 300px"
              :time-picker-props="{ defaultValue: ['00:00:00'] }"
              format="YYYY-MM-DD "
              v-model="searchTime"
            />
            <div class="data_select_btn_box">
              <a-button type="primary" @click="searchBtnClick">
                <template #icon>
                  <icon-search />
                </template>
                查询
              </a-button>
              <a-button type="primary" @click="exportExcelClick">
                <template #icon>
                  <icon-share-external />
                </template>
                导出
              </a-button>
            </div>
          </a-space>
        </div>
      </div>
      <div class="tabCar_data">
        <a-table
          class="paramterDetail_table_data"
          :bordered="false"
          :data="currentParamRecordList"
          size="large"
          rowClassName="tableRow"
          :style="{ width: '1120px', height: '690px' }"
          :columns="currentParamRecordTableColumsList"
          :pagination="{ total: total, current: currentPage }"
          :onPageChange="currentPageChange"
          :loading="isTableLoading"
        >
          <template #checkDataStatusName="{ rowIndex }">
            <a-tag
              v-if="currentParamRecordList[rowIndex].checkDataStatusName == '适宜'"
              color="green"
              :default-checked="true"
              >{{ currentParamRecordList[rowIndex].checkDataStatusName }}</a-tag
            >
            <a-tag
              v-if="currentParamRecordList[rowIndex].checkDataStatusName == '偏高'"
              color="red"
              :default-checked="true"
              >{{ currentParamRecordList[rowIndex].checkDataStatusName }}</a-tag
            >
            <a-tag
              v-if="currentParamRecordList[rowIndex].checkDataStatusName == '偏低'"
              color="orange"
              :default-checked="true"
              >{{ currentParamRecordList[rowIndex].checkDataStatusName }}</a-tag
            >
          </template>

          <template #checkDataValue="{ rowIndex }">
            <span class="value">{{ currentParamRecordList[rowIndex].checkDataValue }}</span>
            <span class="unit">{{ currentParamRecordList[rowIndex].checkDataUnit }}</span>
          </template>
        </a-table>
      </div>
    </a-card>
    <!-- 导出Excel表格的弹窗 -->
    <a-modal v-model:visible="isShowExporExcelModel" @ok="exprotExcelOk" @cancel="exprotExcelCancel">
      <template #title> 请选择要导出本参数历史记录的时间段 </template>
      <div class="exportExcelModelBox">
        <a-range-picker
          style="width: 300px"
          :time-picker-props="{ defaultValue: ['00:00:00'] }"
          format="YYYY-MM-DD"
          v-model="exprotExcelTime"
        />
      </div>
    </a-modal>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted } from 'vue'
export default defineComponent({
  name: 'ParameterDetails'
})
</script>
<script lang="ts" setup>
// 引入

// import * as XLSX from 'xlsx'
// import FileSaver from 'file-saver'
import { getCurrentSelectParameterRecordListApi, getExprotExcelDataApi } from '@/apis/equipment'
import { useEquipmentStore } from '@/store'
import { Message } from '@arco-design/web-vue'
const equipmentStore = useEquipmentStore()

// 当前参数历史记录表格字段规则
const currentParamRecordTableColumsList = ref([
  {
    title: '指标',
    dataIndex: 'checkDataName',
    align: 'center',
    width: '200'
  },
  {
    title: '状态',
    dataIndex: 'checkDataStatusName',
    align: 'center',
    width: '200',
    slotName: 'checkDataStatusName'
  },
  {
    title: '数值',
    dataIndex: 'checkDataValue',
    align: 'center',
    width: '300',
    slotName: 'checkDataValue'
  },
  {
    title: '时间',
    dataIndex: 'devCheckTime',
    align: 'center',
    width: '400'
  }
])

// 导出的点击事件
const exportExcelClick = () => {
  isShowExporExcelModel.value = true
}

// 导出Excel弹窗显示的标识
const isShowExporExcelModel = ref(false)

// 导出Excel弹窗的确定事件
const exprotExcelOk = () => {
  isShowExporExcelModel.value = false
  getExprotExcelDataFunc()
}

// 导出Excel弹窗的取消事件
const exprotExcelCancel = () => {
  isShowExporExcelModel.value = false
}

// 处理Excel表格数据流的函数
const disposeExcelDataFunc = (debug: any) => {
  if (debug) {
    var elink = document.createElement('a')
    elink.download = `${equipmentStore.$state.paramInfo.paramName}历史记录--(${equipmentStore.$state.devInfo.devName}).xls`
    elink.style.display = 'none'
    var blob = new Blob([debug], { type: 'application/x-msdownload' })
    elink.href = URL.createObjectURL(blob)
    document.body.appendChild(elink)
    elink.click()
    document.body.removeChild(elink)
    Message.success('导出成功')
  } else {
    Message.error('导出异常请联系管理员')
  }
}

// 导出Excel表格获取数据的函数
const getExprotExcelDataFunc = async () => {
  await getExprotExcelDataApi({
    devId: equipmentStore.$state.devInfo.devId,
    startTime: exprotExcelTime.value.length != 0 ? `${exprotExcelTime.value[0] + ' 00:00:00'}` : '00:00:00',
    endTime: exprotExcelTime.value.length != 0 ? `${exprotExcelTime.value[1] + ' 23:59:59'}` : '23:59:59'
  }).then((res: any) => {
    console.log(res) // 控制台输出：Blob {size: 30208, type: 'application/x-msdownload'}
    disposeExcelDataFunc(res)
  })``.catch((err: any) => {
    console.log(err)
  })
}

// 存储当前参数历史记录列表的数据
const currentParamRecordList = ref()

// 当前页数
const currentPage = ref(1)

// 总共页数
const total = ref(0)

// 搜索当前时间选择查询的开始时间和结束时间
const searchTime = ref([])

// 导出Excel表格的开始时间和结束时间
const exprotExcelTime = ref([])

// 点击查询按钮的时候的点击事件
const searchBtnClick = () => {
  getCurrentSelectParameterRecordListFunc()
}

// 表格加载的标识
const isTableLoading = ref(false)

// 更改表格加载状态的函数
const setTable = (bool: any) => {
  isTableLoading.value = bool
}

// 分页的当前页改变的change事件
const currentPageChange = (val: any) => {
  currentPage.value = val
  getCurrentSelectParameterRecordListFunc()
}

// 请求参数历史记录列表的函数
const getCurrentSelectParameterRecordListFunc = async () => {
  setTable(true)
  let data = {
    devId: equipmentStore.$state.devInfo.devId,
    paramName: equipmentStore.$state.paramInfo.paramName,
    page: currentPage.value,
    size: 10,
    startTime: searchTime.value.length != 0 ? `${searchTime.value[0] + ' 00:00:00'}` : '00:00:00',
    endTime: searchTime.value.length != 0 ? `${searchTime.value[1] + ' 23:59:59'}` : '23:59:59'
  }
  const res = await getCurrentSelectParameterRecordListApi(data)
  currentParamRecordList.value = res.data.list
  total.value = res.data.total
  setTable(false)
  // Message.success('加载成功')
}

// 初始化
onMounted(() => {
  getCurrentSelectParameterRecordListFunc()
})
</script>

<style scoped>
.tableRow {
  height: 100px;
}
.wrap {
  padding: 14px;
}

.tabCard_title span {
  font-size: 18px;
  font-weight: bold;
  font-family: '黑体';
  color: #293035;
  letter-spacing: 1px;
}

.tabCar_data {
  margin-top: 20px;
}

::v-deep .arco-table-th {
  font-family: '黑体';
  font-size: 16px;
  font-weight: 600;
  color: #293035;
}

::v-deep .arco-table-td {
  font-weight: 400;
  color: #293035;
}

::v-deep .arco-table-tr {
  height: 50px;
}

.tabCar_type {
  width: 300px;
  margin-top: 15px;
  font-size: 16px;
  font-weight: bold;
  font-family: '黑体';
  color: #293035;
  display: flex;
  justify-content: space-between;

  letter-spacing: 1px;
}

.tabCar_type .title {
  line-height: 28px;
  display: inline-block;
}

.tabCar_type .item {
  color: #808080;
}
.tabCar_search {
  width: 900px;
  margin-top: 15px;
  font-size: 16px;
  font-weight: bold;
  font-family: '黑体';
  color: #293035;
  letter-spacing: 1px;
}
.tabCar_search .data_select_box {
  display: inline-block;
  margin-left: 10px;
}
::v-deep .arco-tag {
  padding: 13px 15px;
  font-size: 15px;
}

::v-deep .arco-space-item-split {
  height: 20px;
}

::v-deep .arco-divider-vertical {
  height: 1.5em;
}

/* ::v-deep .arco-space-item{
    height: ;
  } */

::v-deep .element.style {
  margin: 0px -24px 24px 0px;
}

.data_select_btn_box {
  width: 180px;
  display: flex;
  justify-content: space-between;
}
.exportExcelModelBox {
  text-align: center;
  line-height: 100px;
}

.paramterDetail_table_data .unit {
  font-size: 8px;
  color: #808080;
  margin-left: 4px;
}

::v-deep .arco-btn {
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 2px;
}

.card_box {
  height: 87vh;
}
</style>
